<template>
	<view >
		<navSearchBar title="筛选" ></navSearchBar>
		<scroll-view class="select-field">
			<view class="select-item">
				<view class="title">列表排序</view>
				<view class="select-item-body select-item-body-3">
					<view v-for="(item,index) in sortData" :key="index" class="text-body text-body-3" :class="[activeHandle(item,'SORT')?'active-style':'']" @click="selectSearch(item,'SORT')">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			<view class="select-item">
				<view class="title">需求年份</view>
				<view class="select-item-body select-item-body-3">
					<view v-for="(item,index) in yearData" :key="index" class="text-body" :class="[activeHandle(item,'YEAR')?'active-style':'']" @click="selectSearch(item,'YEAR')">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			<view class="select-item" v-if="searchData['demand_year'] !== ''">
				<view class="title">需求月份</view>
				<view class="select-item-body select-item-body-3">
					<view v-for="(item,index) in monthData" :key="index" class="text-body" :class="[activeHandle(item,'MONTH')?'active-style':'']" @click="selectSearch(item,'MONTH')">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			<view class="select-item">
				<view class="title">需求类型</view>
				<view class="select-item-body select-item-body-3">
					<view v-for="(item,index) in baseTypeList" :key="index" class="text-body text-body-3" :class="[activeHandle(item,'TYPE')?'active-style':'']" @click="selectSearch(item,'TYPE')">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
		
			<view class="select-item">
				<view class="title">需求状态</view>
				<view class="select-item-body select-item-body-3">
					<view v-for="(item,index) in statusData" :key="index" class="text-body text-body-3" :class="[activeHandle(item,'STATUS')?'active-style':'']" @click="selectSearch(item,'STATUS')">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			
			<view class="select-item">
				<view class="title">预估利润</view>
				<view class="select-item-body select-item-body-3">
					<view v-for="(item,index) in predictMoneyData" :key="index" class="text-body text-body-3" :class="[activeHandle(item,'MONEY')?'active-style':'']" @click="selectSearch(item,'MONEY')">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			
			<view class="select-item">
				<view class="title">需求归属人</view>
				<view class="select-item-body select-item-body-3">
					<view v-for="(item,index) in contactPersonData" :key="index" class="text-body text-body-3" :class="[activeHandle(item,'CONTACT_PERSON')?'active-style':'']" @click="selectSearch(item,'CONTACT_PERSON')">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			
			<view class="footer">
				<tn-button fontBold fontSize="32" backgroundColor="#FFA457" fontColor="#FFFFFF" width="442rpx" height="72rpx" @click="comfireSearch">确定筛选</tn-button>
				<tn-button class="right-button" margin="0 0 0 20rpx" fontSize="24" border  backgroundColor="#F7F8FC" fontColor="#000000" width="230rpx" height="72rpx" @click="cancel">清空条件</tn-button>
			</view>
		</scroll-view>
		
		<!-- <tn-picker mode="multiSelector" v-model="areaShow"  :range="areaData" rangeKey="title" :defaultSelector="initAreaData" @columnchange="areaColumnchange" @confirm="areaConfirm"></tn-picker>
		<tn-picker mode="multiSelector" v-model="timeShow"  :range="timeRangeData" rangeKey="title" :defaultSelector="initStartTime" @columnchange="startTimeColumnchange" @confirm="startTimeConfirm"></tn-picker>
		<tn-picker mode="multiSelector" v-model="endTimeShow"  :range="endTimeRangeData" rangeKey="title" :defaultSelector="initEndTime" @columnchange="endTimeColumnchange" @confirm="endTimeConfirm"></tn-picker> -->
	</view>
</template>

<script>
	const SORT = 'SORT';
	const BASETYPE = 'TYPE';
	const YEAR = 'YEAR';
	const MONTH = 'MONTH';
	const STATUS = 'STATUS';
	const MONEY = 'MONEY';
	const CONTACT_PERSON = 'CONTACT_PERSON';

	export default {
		data() {
			return {
				sortData:[{text:'默认排序',value:''},{text:'需求时间最早',value:1},{text:'需求时间最晚',value:2}],
				searchData:{
					order:'',
					user_id:'',
					demand_year:'',
					demand_month:'',
					demand_type:'',
					demand_status:'',
					money:''
				},
				baseTypeList:[],
				yearData:[{text:'不限',value:''}],
				monthData:[],
				predictMoneyData:[],
				
				maskVisible:false,
				personNum:'',
				negativeTop:0,
				areaData:[[{ title: "不限", id:''}],[{ title: "不限", id:''}],[{ title: "不限", id:''}]],
				initAreaData:[0,0,0],
				areaShow:false,
				industryData:[],
				industryDetailData:[],
				statusData:[],
				contactPersonData:[],
				startTime:'',
				endTime:'',
				timeRangeData:[],
				timeShow:false,
				endTimeShow:false,
				endTimeRangeData:[],
				initStartTime:[],
				initEndTime:[],
				customTimeText:'自定义选择日期'
			}
		},
		onLoad(){
			console.log('onLoadfilter',this.$Route.query)
			const {searchData,areaText} = this.$Route.query;
			
			
			
			this.searchData = searchData;
			let year  = new Date().getFullYear();
			this.yearData.push({text:year+'年',value:year});
			for(let i = 1; i <= 12; i++) {
				this.monthData.push({text:i+'月',value:i});
			}
			
			console.log('searchdata',searchData,areaText)
			if(this.searchData.province_id){
				this.areaList[1].text = areaText;
			}
			
			this.getBaseTypeList();
			// this.getIndustyData(0);
			// if(this.searchData.industry_id !== ''){
			// 	this.getIndustyData(this.searchData.industry_id,1);
			// }
			this.getStatusData();
			this.getPredictMoneyData();
			this.getContactPersonData();
			uni.onKeyboardHeightChange(res => {
			  console.log('高度uuuuuu',res.height)
			})
			// this.getAreaList(0);
		},
		methods: {
			areaConfirm(data){
				console.log('datatatata',data)
				let proviceData = this.areaData[0][data[0]];
				let cityData = this.areaData[1][data[1]];
				let regionData = this.areaData[2][data[2]];
				this.searchData['province_id'] = proviceData.id;
				this.searchData['city_id'] = cityData.id;
				this.searchData['region_id'] = regionData.id;
				if(this.searchData['province_id'] !== ''){
					this.areaText = proviceData.title;
				}
				if(this.searchData['city_id'] !== ''){
					this.areaText += '/'+ cityData.title;
				}
				if(this.searchData['region_id'] !== ''){
					this.areaText += '/'+ regionData.title;
				}
				
				this.areaList[1].text = this.areaText;
			},
			areaColumnchange({column, index}){
				console.log('column',column,index);
				let parentId = this.areaData[column][index].id;
				if(column < 2){
					this.getAreaList(parentId, column+1);
				}
				this.$set(this.initAreaData,column,index);
			},
			startTimeConfirm(data){
				console.log('datataatatat',data)
				let year = this.timeRangeData[0][data[0]].title;
				let month = this.timeRangeData[1][data[1]].title;
				let date = this.timeRangeData[2][data[2]].title;
				this.startTime = year+'年'+month+'月'+date+'日';
				this.startTimeStamp = Date.parse(year+'/'+month+'/'+date);
			},
			endTimeConfirm(data){
				let year = this.endTimeRangeData[0][data[0]].title;
				let month = this.endTimeRangeData[1][data[1]].title;
				let date = this.endTimeRangeData[2][data[2]].title;
				this.endTime = year+'年'+month+'月'+date+'日';
				this.endTimeStamp = Date.parse(year+'/'+month+'/'+date);
			},
			getMonthsInYear(year) {
			  let months = [];
			  for (let i = 1; i <= 12; i++) {
				  console.log('rizisuandebudi',year,i,new Date(year, i, 0).getDate())
			    months.push({title:i,date:new Date(year, i, 0).getDate()});
			  }
			  return months;
			},
			startTimeColumnchange({column, index}){
				console.log('startTimeColumnchange1111',column,index)
				let year = 0;
				
				if(column == 0){
					year = parseInt(this.timeRangeData[column][index].title);
					let month = this.getMonthsInYear(year);
					
					this.$set(this.timeRangeData,column + 1, month);
				}
				if(column == 1){
					let monthData = this.timeRangeData[column][index];
					let dateData = [];
					
					for(let i = 1 ; i <= monthData.date; i++){
						dateData.push({title:i})
					}
					console.log('startTimeColumnchange222',dateData)
					this.$set(this.timeRangeData,column + 1,dateData);
				}
				this.$set(this.initStartTime,column,index);
				
				
			},
			endTimeColumnchange({column, index}){
				let year = 0;
				
				if(column == 0){
					year = parseInt(this.endTimeRangeData[column][index].title);
					let month = this.getMonthsInYear(year);
					
					this.$set(this.endTimeRangeData,column + 1, month);
				}
				if(column == 1){
					let monthData = this.endTimeRangeData[column][index];
					let dateData = [];
					
					for(let i = 1 ; i <= monthData.date; i++){
						dateData.push({title:i})
					}
					console.log('startTimeColumnchange222',dateData)
					this.$set(this.endTimeRangeData,column + 1,dateData);
				}
				this.$set(this.initEndTime,column,index);
			},
			getAreaList(parentId,column=0){
				this.$http.get('/api/common/area/select',{parent_id:parentId}).then((res) => {
					if(res.data.status == 200) {
						let data = res.data.data||[];
						data.unshift({ title: "不限", id:''});
						this.$set(this.areaData,column,data)
						console.log('ccccccccc',this.areaData)
						
					} else {
						
					}
					
				})
			},
			getStatusData(type){
				this.$http.get('/api/dictionary/data',{title:'demand_status'}).then((res) => {
					if(res.data.status == 200) {
						this.statusData = JSON.parse(JSON.stringify(res.data.data||[]));
						this.statusData.unshift({text:'不限',value:''});
						// this.cateringCapacityData.push({text:'自定义',value:'custom',type:'custom'});
						
						
					}
				})
			},
			getIndustyData(parentId,column=0){
				this.$http.get('/api/industry/select',{parent_id:parentId}).then((res) => {
					if(res.data.status == 200) {
						let data = res.data.data||[];
						data.unshift({ title: "不限", id:''});
						if(column == 0){
							this.industryData = data.map((el) =>{
								el.text = el.title;
								el.value = el.id;
								return el;
							});
						} else {
							this.industryDetailData = data.map((el) =>{
								el.text = el.title;
								el.value = el.id;
								return el;
							});
						}
						
						
						
					} else {
						
					}
					
				})
			},
			getPredictMoneyData(){
				this.$http.get('/api/dictionary/data',{title:'expected_profit'}).then((res) => {
					if(res.data.status == 200) {
						this.predictMoneyData = res.data.data||[];
						this.predictMoneyData.unshift({text:'不限',value:''});
						
					}
				})
			},
			getContactPersonData(){
				this.$http.get('/api/user/select').then((res) => {
					if(res.data.status == 200) {
						this.contactPersonData = res.data.data||[];
						this.contactPersonData.map((el) => {el.text = el.nickname;el.value = el.id})
						this.contactPersonData.unshift({text:'不限',value:''});
						
					}
				})
			},
			getBaseTypeList() {
				this.$http.get('/api/dictionary/data',{title:'demand_type'}).then((res) => {
					if(res.data.status == 200) {
						this.baseTypeList = res.data.data||[];
						// this.baseTypeList.map((el)=>{el.text = el.title;el.value = el.id;return el})
						this.baseTypeList.unshift({text:'不限',value:''});
					}
				})
			},
			openCustomTime(){
				this.maskVisible = true;
				this.startTime = '';
				this.endTime = '';
				this.startTimeStamp = 0;
				this.endTimeStamp = 0;
			},
			activeHandle(item,type){
				if(type == SORT) {
					return item.value === this.searchData['order']
				} else if (type == YEAR) {
					return item.value === this.searchData['demand_year']
				} else if(type == MONTH){
					return item.value === this.searchData['demand_month']
				} else if(type == STATUS){
					return item.value === this.searchData['demand_status']
				} else if(type == MONEY){
					return item.value === this.searchData['money']
				}
				else if(type == CONTACT_PERSON){
					return item.value === this.searchData['user_id']
				}else if(type == BASETYPE){
					return item.value === this.searchData['demand_type']
				}else if(type == AREA){
					if(this.searchData['province_id']&&item.value){
						return true;
					}
					if(!this.searchData['province_id']&&!item.value){
						return true;
					}
					return false;
				}
			},
			selectSearch(item,type){
				
				if(type == SORT) {
					this.searchData['order'] = item.value;
				} else if (type == YEAR) {
					console.log('mamamamaam',item.value)
					this.searchData['demand_year'] = item.value;
					console.log('mamamamaam2222',this.searchData['demand_year'])
					
				} else if(type == MONTH){
					this.searchData['demand_month'] = item.value;
				} else if(type == STATUS){
					
						this.searchData['demand_status'] = item.value;
					
				}else if(type == MONEY){
					
						this.searchData['money'] = item.value;
					
				}else if(type == CONTACT_PERSON){
					
						this.searchData['user_id'] = item.value;
					
				}else if(type == BASETYPE){
					this.searchData['demand_type'] = item.value;
				}else if(type == AREA){
					if(item.value !== '') {
						this.areaShow = true;
					}
				}
				
				
			},
			openStartTime(){
				this.timeShow = true;
				this.timeRangeData = [[],[],[]];
				let yearData = [];
				let nowYear = new Date().getFullYear();
				let nowMonthIndex = new Date().getMonth();
				let nowDateIndex = new Date().getDate();
			
				for(let i = 1900; i <= nowYear; i++) {
					yearData.push({title:i});
				}
				this.$set(this.timeRangeData,0,yearData);
				
				// year = this.timeRangeData[column][index];
				let month = this.getMonthsInYear(nowYear);
				this.$set(this.timeRangeData,1,month);
				
				let days = []
				for(let i = 1; i<= month[nowMonthIndex].date; i++){
					days.push({title:i})
				}
				
				this.$set(this.timeRangeData,2,days);
				console.log('youduuuuuu',yearData.length - 1,nowMonthIndex,nowDateIndex - 1);
				this.initStartTime = [yearData.length - 1,nowMonthIndex,nowDateIndex - 1];
			},
			openEndTime(){
				this.endTimeShow = true;
				this.endTimeRangeData = [[],[],[]];
				let yearData = [];
				let nowYear = new Date().getFullYear();
				let nowMonthIndex = new Date().getMonth();
				let nowDateIndex = new Date().getDate();
							
				for(let i = 1900; i <= nowYear; i++) {
					yearData.push({title:i});
				}
				this.$set(this.endTimeRangeData,0,yearData);
				
				// year = this.timeRangeData[column][index];
				let month = this.getMonthsInYear(nowYear);
				this.$set(this.endTimeRangeData,1,month);
				
				let days = []
				for(let i = 1; i<= month[nowMonthIndex].date; i++){
					days.push({title:i})
				}
				
				this.$set(this.endTimeRangeData,2,days);
				console.log('youduuuuuu',yearData.length - 1,nowMonthIndex,nowDateIndex - 1);
				this.initEndTime = [yearData.length - 1,nowMonthIndex,nowDateIndex - 1];
			},
			customTimeConfirm(){
				if(!(this.startTime&&this.endTime)){
					this.$tip.toast('请选择日期')
					return;
				}
				if(this.endTimeStamp - this.startTimeStamp < 0){
					this.$tip.toast('结束时间应小于开始时间')
					return;
				}
				
				this.maskVisible = false;
				this.customTimeText = this.startTime +'-'+this.endTime;
				let startTime = new Date(this.startTimeStamp).Format('yyyy-MM-dd');
				let endTime = new Date(this.endTimeStamp).Format('yyyy-MM-dd');
				console.log('wwwwwwww',startTime,this.startTimeStamp)
				this.searchData['activity_time'] = startTime+' ' +endTime;
				
			},
			comfireSearch(){
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.searchData = this.searchData;
				console.log('filter11111111', this.searchData)
				
				this.$Router.back();
			},
			cancel(){
				for(let key of Object.keys(this.searchData)){
					this.searchData[key] = '';
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.select-field{
		padding-bottom: calc(112rpx + env(safe-area-inset-bottom));
		background-color:#FFFFFF;
		padding-top:10rpx;
		.select-item{
			padding:30rpx;
			.title{
				color:#616571;
				font-size: 32rpx;
				font-weight: $Semibold;
				margin-bottom: 30rpx;
				line-height: 32rpx;
			}
			.select-item-body{
				display: grid;
				grid-row-gap: 30rpx;
			}
			.select-item-body-3{
				grid-column-gap: 16rpx;
				grid-template-columns: auto auto auto;
			}
			.select-item-body-4{
				grid-column-gap: 20rpx;
				grid-template-columns: auto auto auto auto;
			}
			.text-body{
				text-align: center;
				line-height: 72rpx;
				font-size: 24rpx;
				color:#6F6F6F;
				background-color: #F7F8FC;
				border-radius: 10rpx;
			}
			.text-body-3{
				
				width: 220rpx;
				height: 72rpx;
				
			}
			.text-body-4{
				
				width: 160rpx;
				height: 72rpx;
				
			}
			.active-style{
				border: 2rpx solid #FFA457;
				background-color: #FDF1E5;
				color: #EE8731;
			}
			.select-item-body-area-type{
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				
				.area-type{
					flex:1;
					margin-left: 20rpx;
				}
			}
			.select-time{
				
					margin-top:30rpx;
				
			}
		}
		.footer{
			width: 100%;
			padding:10rpx 28rpx calc(env(safe-area-inset-bottom) + 30rpx) 30rpx ;
			// display: flex;
			position: fixed;
			bottom: 0;
			background: #FFFFFF;
			height: calc(112rpx + env(safe-area-inset-bottom));
			box-shadow:0 4rpx 17rpx 0 rgba(0, 0, 0, 0.1);
			/deep/.tn-btn-class{
				vertical-align: middle;
			}
			.right-button{
				
				/deep/.tn-btn-class{
					margin-left: 20rpx;
					border: 2rpx solid #CACACA;
				}
			}
			
			
		}
	}
	.popup-field{
		padding:80rpx 60rpx 60rpx;
		.title{
			font-size: 40rpx;
			color:#616571;
			text-align: center;
			
		}
		.middle_field{
			padding:60rpx 0;
			color:#6F6F6F;
		}
		// .input{
			
		// 	width: 100%;
			/deep/.tn-input{
				border-radius: 10rpx;
				background-color: #F7F8FC;
			}
		// }
		.line{
			margin:0 26rpx;
			width:16rpx;
		}
		.footer{
			// padding:0 28rpx 0 30rpx;
			// display: flex;
			.right-button{
				/deep/.tn-btn-class{
					border:2rpx solid #CACACA!important;
					margin-left: 70rpx;
					
				}
			}
			
			
		}
	}
</style>
